<template>
	<view class="chart_box">
		<view class="chart_container">
			<view class="head">
				<image class="w-70rpx" src="@/static/ring/chart/sleep.png" mode="widthFix"></image>
				<text class="title">睡眠</text>

				<view class="value">
					<text>{{ sleepTotalData[0] }}</text>
					<text class="unit">h</text>
					<text>{{ sleepTotalData[1] }}</text>
					<text class="unit">min</text>
				</view>
			</view>

			<view ref="chart" class="chart">
				<sleepChart
					v-if="boundingClientRect"
					ref="sleepChartRef"
					:key="sleepKey"
					:showX="false"
					:showTime="false"
					:value="sleepData"
					:width="boundingClientRect.width"
					:height="boundingClientRect.height"
				>
				</sleepChart>
			</view>
			<view v-if="timeData.length == 2" class="chart_axis">
				<text>{{ timeData[0] }}</text>
				<text>{{ timeData[1] }}</text>
			</view>
		</view>
	</view>
</template>
<script>
import dayjs from "dayjs";
import store from "@/store/index.js";
import SleepChart from "../sleep/index.vue";
import { queryMySleepInfoByDay } from "@/api/ring/chart.js";

export default {
	components: {
		SleepChart,
	},
	props: {
		date: String,
		lastTime: String,
	},
	data() {
		return {
			totalMinutes: 0,
			sleepKey: 0,
			sleepData: [],
			timeData: [],
			chartRef: null,
			chart: null,

			rect: null,
		};
	},

	computed: {
		isLogin() {
			return store.state.userToken;
		},

		refreshSleepChart() {
			return store.state.refreshSleepChart;
		},

		sleepTotalData() {
			return [Math.floor(this.totalMinutes / 60), this.totalMinutes % 60];
		},

		boundingClientRect() {
			return this.rect;
		},
	},

	watch: {
		date() {
			this.updateChartData(this.date);
		},
	},

	mounted() {
		const systemInfo = uni.getSystemInfoSync();

		const query = uni.createSelectorQuery().in(this);
		query
			.select(".chart")
			.boundingClientRect((data) => {
				console.log("boundingClientRect", data);
				this.rect = {
					width: data.width,
					height: data.height,
				};
			})
			.exec();
	},

	methods: {
		getTitle() {
			return 'sleep';
		},
		updateChartData(date) {
			if (!this.isLogin) return;
			if (!date) {
				date = dayjs().format("YYYY-MM-DD HH:mm:ss");
			}
			const isToday = dayjs().isSame(dayjs(date), "day");
			if (isToday && this.lastTime) {
				date = this.lastTime;
			}
			queryMySleepInfoByDay({
				dateStr: dayjs(date).format("YYYY-MM-DD") || dayjs().format("YYYY-MM-DD"),
				offsetMinutes: new Date().getTimezoneOffset(),
			})
				.then(async (res) => {
				console.log("queryMySleepInfoByDay", res.data);

					const sleepData = res.data;

					const userSleepDBVos = sleepData.userSleepDBVos;
					this.totalMinutes = sleepData.totalMinute;
					let _sleepData = [];
					let _timeData = [];

					if (userSleepDBVos) {
						userSleepDBVos.forEach((_, i) => {
							_sleepData.push({
								type: _.value,
								minutes: Math.round(dayjs(_.endTime).diff(dayjs(_.startTime), "minute")),
							});
						});
						if (userSleepDBVos.length) {
							_timeData[0] = dayjs(userSleepDBVos[0].startTime).format("HH:mm");
							_timeData[1] = dayjs(userSleepDBVos[userSleepDBVos.length - 1].endTime).format("HH:mm");
						}
					}

					this.sleepData = _sleepData;
					this.timeData = _timeData;
					this.sleepKey++;
				})
				.catch((error) => {
					console.log("sleep Data error", error);
				});
		},
	},
};
</script>
<style lang="scss" scoped>
.chart_box {
	width: 100%;
	height: 100%;
	color: black;

	.w-70rpx {
		width: 70rpx;
	}

	.w-40rpx {
		width: 40rpx;
	}

	.chart_container {
		width: 100%;
		height: calc(100% - 74rpx);
		padding: 28rpx;
		padding-bottom: 0;

		.head {
			width: 100%;
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.title {
				font-size: 32rpx;
				font-weight: 500;
				text-align: left;
				margin-left: 12rpx;
			}
		}

		.value {
			margin-left: auto;
			text {
				font-size: 48rpx;
				font-weight: 500;
				line-height: 68rpx;
				text-align: left;

				&.unit {
					font-size: 24rpx;
					line-height: 44rpx;
					margin-left: 4rpx;
				}
			}
		}

		.chart {
			width: 100%;
			height: 96rpx;
			// margin-top: 16rpx;
		}

		.chart_axis {
			width: 100%;
			height: 28rpx;
			margin-top: 14rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: rgba($color: #000000, $alpha: 0.5);
			font-size: 20rpx;
			font-weight: 300;
		}
	}
}
</style>
